import { useState, useEffect } from 'react';
import { NavBar, List, Switch } from "antd-mobile";
import { useHistory } from "react-router-dom";

import { CUSTOM_LAYOUT_STORAGE_KEY, SettingSwitchKeys } from '../../../constants';

import './style.scss';

export default function() {
  const history = useHistory();
  const [settingInfo, setSettingInfo] = useState({ [SettingSwitchKeys.atMeInNoDisturb]: true });

  useEffect(() => {
    const setting = localStorage.getItem(CUSTOM_LAYOUT_STORAGE_KEY);
    if (setting) {
      try {
        const mySetting = JSON.parse(setting);
        setSettingInfo({ ...mySetting, [SettingSwitchKeys.atMeInNoDisturb]: mySetting[SettingSwitchKeys.atMeInNoDisturb] || true });
      } catch (e) {
        console.log(e);
      }
    }
  }, []);

  const handleSwitch = (checked) => {
    const newSetting = { ...settingInfo, [SettingSwitchKeys.atMeInNoDisturb]: checked };
    setSettingInfo(newSetting);
    localStorage.setItem(CUSTOM_LAYOUT_STORAGE_KEY, JSON.stringify(newSetting));
  }

  return (<div className="chatMessageGroupManagePage">
      <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>分组管理</NavBar>
      <List style={{ '--border-top': '0', '--border-bottom': '0', marginTop: 12 }}>
        <List.Item extra={<Switch checked={settingInfo[SettingSwitchKeys.atMeInNoDisturb]} onChange={checked => handleSwitch(checked)} />}>仅透出 @我的消息</List.Item>
      </List>
      <div className="tipBar">
        开启后，在聊天分组模式下，消息免打扰分组中仅会出现有 @消息的会话
      </div>
      {/* <div className='btnArea'>
        <Button style={{ width: '100%'}} onClick={() => Dialog.show({
          title: '新建分组',
          content: <Input style={{ border: '1px solid #e5e5e5', borderRadius: 2, padding: '7px 12px', boxSizing: 'border-box' }} placeholder='请输入分组名' onChange={(value) => handleChangeGroupName(value)} />,
          closeOnAction: true,
          actions: [[
            {
              key: 'cancel',
              text: '取消',
            },
            {
              key: 'ok',
              text: '确认',
            }]
          ],
        })}>添加新分组</Button>
      </div> */}
    </div>
  )
}